<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap Template</title>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="../../../css/mdb.min.css" rel="stylesheet">



    <style>
        /* TEMPLATE STYLES */
        
        html,
        body,
        header,
        .view {
            height: 100%;
        }
        /* Navigation*/
        
        .navbar {
            background-color: transparent;
        }
        
        .top-nav-collapse {
            background-color: #455A64;
        }
        
        @media only screen and (max-width: 768px) {
            .navbar {
                background-color: #0A6A60;
            }
        }
        
        .full-bg-img {
            color: #fff;
        }
        
        .view {
            background: url("http://mdbootstrap.com/images/regular/people/img%20(63).jpg")no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        
        footer.page-footer {
            background-color: #7E929C;
        }
    </style>

</head>

<body>

    <!--Navigation & Intro-->
    <header>

        <!--Navbar-->
        <nav class="navbar navbar-dark navbar-fixed-top scrolling-navbar">

            <!-- Collapse button-->
            <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
            <i class="fa fa-bars"></i></button>

            <div class="container">

                <!--Collapse content-->
                <div class="collapse navbar-toggleable-xs" id="collapseEx">

                    <!--Links-->
                    <ul class="nav navbar-nav smooth-scroll">
                        <li class="nav-item active">
                            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#my-work">My work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#about-me">About me</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#contact">Contact</a>
                        </li>
                    </ul>

                    <!--Navbar icons-->
                    <ul class="nav navbar-nav nav-flex-icons">
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.2s">
                            <a class="nav-link"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.3s">
                            <a class="nav-link"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li class="nav-item wow fadeInRight" data-wow-delay="0.4s">
                            <a class="nav-link"><i class="fa fa-instagram"></i></a>
                        </li>
                    </ul>

                </div>
                <!--/.Collapse content-->

            </div>

        </nav>
        <!--/.Navbar-->

        <!--Mask-->
        <div class="view hm-black-strong">
            <div class="full-bg-img flex-center" id="home">
                <ul>
                    <li>
                        <h1 class="h1-responsive wow fadeInUp">Our New Course is Ready</h1></li>
                    <li>
                        <p class="wow fadeInUp" data-wow-delay="0.2s">It comes with a lot of new features, easy to follow videos and images. Check it out now!</p>
                    </li>
                    <li>
                        <a class="btn btn-outline-white btn-lg wow fadeInLeft" data-wow-delay="0.2s"><i class="fa fa-user left"></i> Sign up!</a>
                        <a class="btn btn-outline-white btn-lg wow fadeInRight" data-wow-delay="0.2s"><i class="fa fa-book left"></i>Learn more</a>
                    </li>
                </ul>
            </div>
        </div>
        <!--/.Mask-->

    </header>
    <!--/Navigation & Intro-->

    <!--Main layout-->
    <main>
        <div class="container">


        </div>
    </main>
    <!--/Main layout-->


    <!-- SCRIPTS -->

    <!-- JQuery -->
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>

    <!-- Tooltips -->
    <script type="text/javascript" src="../../../js/tether.min.js"></script>

    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>

    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        new WOW().init();
    </script>


</body>

</html>